<template>
  <div class="category">
      <h3>图书分类</h3>
      <div v-for="category in categories" :key="category.id">
          <h5>{{ category.name }}</h5>
          <router-link v-for="child in category.children" :key="child.id"
            :to="'/category/' + child.id">{{ child.name }}</router-link>
      </div>
      
  </div>
</template>
<script>
  export default {
    name:'HomeCategory',
    data () {
      return {
        categories: []
      };
    },

    created(){
      this.axios.get("/category")
        .then(response => {
          if(response.status == 200){
            this.categories = response.data;
          }
        })
        .catch(error => alert(error));
    },
  }
</script>

<style scoped>
.category {
    /*margin-top: 10px;
    */
    /*position: fixed;*/
    margin-left: 60px;
    margin-top: 10px;
    float: left;
  
    border: solid 1px #ccc;
    width: 15%
}
.category div{
  margin-bottom: 10px;
}
.category a{
    padding: 0 5px 0 5px;
}
</style>